<template>
  <el-container>
    <el-header style="border-bottom: 1px #0078cb solid; ">
      <div style="display: flex;justify-content: space-between;align-items: center;height: 100%">
        <h1>应用示例</h1>
        <el-button-group>
          <el-button size="small" @click="sendMsg">发送消息到：</el-button>
          <el-select style="width: 100px" size="small" v-model="value" placeholder="请选择" value="">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-button-group>
        <!--        <button @click="sendMsg2">发送消息给组件component2</button>-->
      </div>
    </el-header>
    <el-main>
      <div class="box" id="component1">
        <h2>组件1</h2>
        <iframe src="/#/component1" frameborder="0"></iframe>
      </div>
      <div class="box" id="component2">
        <h2>组件2</h2>
        <iframe src="/#/component2" frameborder="0"></iframe>
      </div>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: 'Index',
  mounted () {
    // eslint-disable-next-line no-undef
    dragMsg.init(
      ['component1', 'component2']
    )
  },
  data () {
    return {
      options: [{
        value: '1',
        label: '组件1'
      }, {
        value: '2',
        label: '组件2'
      }],
      value: '1'
    }
  },
  methods: {
    sendMsg () {
      if (this.value === '1') {
        this.sendMsg1()
      }
      if (this.value === '2') {
        this.sendMsg2()
      }
    },
    sendMsg1 () {
      // eslint-disable-next-line no-undef
      dragMsg.sendMsg2Component({
        componentId: 'component1',
        content: '发送给component1的消息'
      })
    },
    sendMsg2 () {
      // eslint-disable-next-line no-undef
      dragMsg.sendMsg2Component({
        componentId: 'component2',
        content: '发送给component2的消息'
      })
    }
  }
}
</script>

<style scoped>
  .box {
    float: left;
    margin: 10px;
    border: 1px #dce4e5 solid;
    width: 600px;
    height: 500px;
  }

  h2 {
    margin: 0;
    height: 40px;
    background: #f2f2f2;
    font-weight: normal;
    line-height: 40px;
    padding-left: 10px;
  }

  iframe {
    width: 100%;
    height: calc(100% - 40px);
    vertical-align: top;
  }
</style>
